//
// Tiles
// --------------------------------------------------

.btn.tile-button {
	display: block;
	text-align: left;
	padding: 0;
	margin-bottom: 15px;
	border-right: 7.5px solid @default-border-color;
	.tile-content-wrapper {
		overflow: hidden;
		padding: 10px 15px;
		position: relative;
		.fa, .glyphicon {
			position: absolute;
			font-size: 57px;
			top: 50%;
			margin-top: -25px;
			left: 15px;
			.transition(all 300ms ease-in-out);
			.transform(rotate(-20deg));
		}
		.tile-content {
			font-size: 35px;
			text-align: right;
			font-weight: 500;
			span {
				font-size: 25px;
			}
		}
		small {
			text-align: right;
			font-size: @baseFontSize + 3;
			display: block;
		}
	}
	
	&:hover {
		background-color: @white;
		.tile-content-wrapper {
			.fa, .glyphicon  {				
				left: -20px;
				margin-top: -45px;
				font-size: 110px!important;
				.transform(rotate(20deg));
				.opacity(0.2);
			}
			
			.tile-content, small {
				.opacity(0.5);
			}
		}
	}
	
	&.btn-default {
		border-color: darken(@themeColor, 7%);
		&:hover {
			color: @themeColor;
		}
	}
	&.btn-dark, &.btn-inverse {
		border-color: darken(@gray, 7%);
		&:hover {
			color: @gray;
		}
	}
	&.btn-white {
		border-color: @default-border-color;
		&:hover {
			color: @gray-light;
		}
	}

	&.btn-danger {
		border-color: darken(@brand-danger, 7%);
		&:hover {
			color: @brand-danger;
		}
	}
	
	&.btn-warning {
		border-color: darken(@brand-warning, 7%);
		&:hover {
			color: @brand-warning;
		}
	}

	&.btn-primary {
		border-color: darken(@brand-primary, 7%);
		&:hover {
			color: @brand-primary;
		}
	}

	&.btn-info {
		border-color: darken(@brand-info, 7%);
		&:hover {
			color: @brand-info;
		}
	}
	&.btn-success {
		border-color: darken(@brand-success, 7%);
		&:hover {
			color: @brand-success;
		}
	}

	&.btn-line {
		background: @white;
		border-width: 1px 7.5px 1px 1px;
		.tile-content-wrapper {
			.fa, .glyphicon {
				margin-top: -45px;
				font-size: 110px;
				.transform(rotate(20deg));
				left: -20px;
			}
			
			.fa, .glyphicon, .tile-content, small {
				.opacity(0.7);
			}
		}
		
		&:hover {
			.tile-content-wrapper {
				.tile-content {
					.opacity(1);
				}
				
				.fa, .glyphicon {
					margin-top: -25px;
					font-size: 57px!important;
					.transform(rotate(-20deg));
					left: 15px;
				}
				
				.fa, .glyphicon, small {
					.opacity(0.55);
				}
			}
		}
		
		&.btn-default {
			&:active, &:focus {
				color: @themeColor;
			}
		}
		&.btn-primary {
			&:active, &:focus {
				color: @brand-primary;
			}
		}
		&.btn-success {
			&:active, &:focus {
				color: @brand-success;
			}
		}
		&.btn-danger {
			&:active, &:focus {
				color: @brand-danger;
			}
		}
		&.btn-info {
			&:active, &:focus {
				color: @brand-info;
			}
		}
		&.btn-warning {
			&:active, &:focus {
				color: @brand-warning;
			}
		}
		&.btn-dark, &.btn-gray, &.btn-inverse {
			&:active, &:focus {
				color: @gray-dark;
			}
		}
	}

}